
<div class="intuitive-power" id="intuitive_power">
    <div class="animate__animated wow animate__fadeInUp intuitive_title">
       <div class="page-width">
        {% if section.settings.heading != blank %}
          {{  section.settings.heading  }}
        {% endif %}
       </div>
    </div>
  <div class="intuitive_content">
        {%- for block in section.blocks -%}
           <div class="intuitive-video intuitive-video_{{ forloop.index0 }}">
            <div class="bg"></div>
            {% if block.settings.html != blank %}
            <div class="html">
              {{ block.settings.html }}
            </div>
           {% endif %}
            <div class="content_text content_{{ forloop.index0 }}">
              <div class="page-width">
                  <div class="des">
                      {% if block.settings.title != blank %}
                      <p class="p"> {{ block.settings.title  }} </p>
                      {% endif %}
                      {% if block.settings.text != blank %}
                        <div class="rte">
                          {{ block.settings.text }}
                        </div>
                      {% endif %}
                  </div>
              </div>
            </div>
           </div>
        {%- endfor -%}   
     </div> 
</div>


<script>

    const intro = document.querySelector(".intuitive-power");
    const video = intro.querySelector(".intuitive_content");
    const text = intro.querySelector(".content_text");

    const Cvcontroller = new ScrollMagic.Controller();

      let scene7 = new ScrollMagic.Scene({
         duration: 2000,
         triggerElement: intro,
         triggerHook: 0
         })
        .setPin(intro)
        .addTo(Cvcontroller);

        var pinani = new TimelineMax()
        .add(TweenMax.to(".intuitive_content", 1, {top: "0%", ease: Bounce.easeOut}))
        .add([
            TweenMax.to(".intuitive-video_0", 1, {display: 'none'}),
            TweenMax.from(".intuitive-video_1", 1, {display: 'none'}),
         ])
         .add([
           TweenMax.to(".intuitive-video_1", 1, {display: 'none'}),
           TweenMax.from(".intuitive-video_2", 1, {display: 'none'}),
         ])

         var appTextslide = new TimelineMax()
         .add(TweenMax.to(".content_text", 1, { ease: Bounce.easeOut}))
         .add([
             TweenMax.to(".content_0", 1, {opacity: 0}),
             TweenMax.from(".content_1", 1, {opacity: 0}),
          ])
          .add([
            TweenMax.to(".content_1", 1, {opacity: 0}),
            TweenMax.from(".content_2", 1, {opacity: 0}),
         ])
    
         
        let scene8 = new ScrollMagic.Scene({
        duration: 2000,
        triggerElement: intro,
        triggerHook: 0
        })
        .setTween(pinani)
        .addTo(Cvcontroller);  

        let scene9 = new ScrollMagic.Scene({
          duration: 2000,
          triggerElement: intro,
          triggerHook: 0
          })
          .setTween(appTextslide)
          .addTo(Cvcontroller);  

</script>




{%- comment -%} <script>
  var controller = new ScrollMagic.Controller(),
  scene,
  video = document.getElementById('canvas_video'),
  intro = document.querySelector(".intuitive-power"),
  videoDuration;

  video.onloadeddata = function() {    
  videoDuration = video.duration;
  var videoTween = TweenMax.to(video, .05, {currentTime: videoDuration, ease: Quad.easeOut, overwrite:true, pause:true, cuiviness:.2 });

  var scene = new ScrollMagic.Scene({
    triggerElement: intro, 
    duration: 2000, 
    triggerHook: 0
  })
  .setTween(videoTween) 
  .addIndicators({name: "video"}) 
  .setPin(intro)
  .addTo(controller);



  };

</script> {%- endcomment -%}




{%- comment -%} <script>

var controller = new ScrollMagic.Controller(),
    scene,
    video = document.getElementById('canvas_video'),
    intro = document.querySelector(".intuitive-power"),
    videoDuration;


video.onloadeddata = function() {    
  videoDuration = video.duration;
  var videoTween = TweenMax.to(video, .2, {currentTime: videoDuration, ease: Quad.easeOut, overwrite:true, pause:true });

  var scene = new ScrollMagic.Scene({
    triggerElement: intro, 
    duration: 8000, 
    triggerHook: 0
  })
  .setTween(videoTween) 
  .addIndicators({name: "video"}) 
  .setPin(intro)
  .addTo(controller);
};
</script>  {%- endcomment -%}



{%- comment -%} <script>
  var controller = new ScrollMagic.Controller(),
    scene,
    video = document.getElementById('canvas_video'),
    videoDuration;

    

// Run program on video load
video.onloadeddata = function() {
    
    // Grab the target video duration
    videoDuration = video.duration;
    console.log(video.duration);

    // Tween the video from beginning to end
    var videoTween = TweenMax.to(video, 1, {
                    currentTime: videoDuration,
                    ease: Quad.easeOut,
                    overwrite:true,
                    pause:true
    });

    // Build ScrollMagic Scene
    var scene = new ScrollMagic.Scene({triggerElement: "#container", duration: 20000, offset: 400})
    .setTween(videoTween) // Add tween to the scene
    .addIndicators({name: "video play"}) // Add indicators to the scrollbar		
    .setPin(video)					
    .addTo(controller); // Add scene to the controller
};
</script> {%- endcomment -%}


{%- comment -%} 
<script>

const intro = document.querySelector(".intuitive-power");
const video = intro.querySelector("video");

const controller = new ScrollMagic.Controller();

let scene = new ScrollMagic.Scene({
  duration: 17000,
  triggerElement: intro,
  triggerHook: 0
})
  .addIndicators()
  .setPin(intro)
  .addTo(controller);


let accelamount = 0.1;
let scrollpos = 0;
let delay = 0;

scene.on("update", e => {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
  scrollpos = e.scrollPos / 1000;
});

setInterval(() => {
  delay += (scrollpos - delay) * accelamount;
  console.log(scrollpos, delay);

  video.currentTime = delay;
}, 33.3);



</script>  {%- endcomment -%}

{%- comment -%} <script>

    const intro = document.querySelector(".canvas-video");
    const video = intro.querySelector(".intuitive-power video");
    const text = intro.querySelector(".content_text");

    const Cvcontroller = new ScrollMagic.Controller();

      let scene7 = new ScrollMagic.Scene({
         duration: 2500,
         triggerElement: intro,
         triggerHook: 0
         })
        .setPin(intro)
        .addTo(Cvcontroller);

        var pinani = new TimelineMax()
        .add(TweenMax.to(".canvas-video", 2, {top: "0%", ease: Bounce.easeOut, delay: 0.2}))
        .add([
            TweenMax.to(".canvas-video .content_0", 2, {display:'none', opacity: 1, bottom: '+=60', y: '20', visibility: 'visible'}),
            TweenMax.from(".canvas-video .content_1", 2, {display:'none', opacity: 0, bottom: '+=60', y: '20%', visibility: 'hidden'}),
         ])
         .add([
           TweenMax.to(".canvas-video .content_1", 2, {display:'none', opacity: 1, bottom: '+=60', y: '20', visibility: 'visible' }),
           TweenMax.from(".canvas-video .content_2", 2, {display:'none', opacity: 0, bottom: '+=60', y: '20%', visibility: 'hidden'}),
         ])



      let scene8 = new ScrollMagic.Scene({
        duration: 2000,
        triggerElement: intro,
        triggerHook: 0.2
        })
        .setTween(pinani)
        .addTo(Cvcontroller);  


        let accelamount = 0.1;
        let scrollpos = 0;
        let delay = 0;

  

        scene7.on("update", e => {
        scrollpos = e.scrollPos / 1000;
      }); 

        setInterval(() => {
        delay += (scrollpos - delay) * accelamount;
         // console.log(scrollpos, delay);
      
        video.currentTime = delay;
        }, 33.3);



</script> {%- endcomment -%}

{% schema %}
    {
      "name": "canvas video",
      "tag": "section",
      "class": "spaced-section spaced-section--full-width canvas-video",
      "settings": [
      {
        "type": "text",
        "id": "heading",
        "default": "Heading",
        "label": "Heading"
      }
      ],
      "blocks": [
        {
        "type": "text",
        "name": "text",
        "settings": [
          {
            "type": "html",
            "id": "html",
            "label": "Html"
        },  
        {
            "type": "text",
            "id": "title",
            "label": "Title"
        },
        {
            "type": "richtext",
            "id": "text",
            "label": "Text"
        }
        ]
        }
      ],
      "presets": [
        {
          "name": "canvas video"
        }
      ]
    }
{% endschema %}
    